<h2>人员登记系统</h2>

<div class="people_list">
    <ul>
        <li class="inputname">姓名： <input type="text" [(ngModel)]="userInfo.username"></li>

        <li>
            性别：
            <!-- label 里的 for 对应radio里的 id ，是为了点击label里字也能选择状态框 -->
            <input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="userInfo.sex"><label for="sex1">男</label>
            <input type="radio" value="2" name="sex" id="sex2" [(ngModel)]="userInfo.sex"><label for="sex2">女</label>
        </li>

        <li>
            城市：
            <select name="city" id="city" [(ngModel)]="userInfo.city">
                <option [value]="item" *ngFor="let item of userInfo.citys">{{item}}</option>
            </select>
        </li>
        <li>
            爱好：
            <span *ngFor="let item of userInfo.hobby; let key=index">
                <input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked"> <label [for]="'check' + key">{{item.title}}</label>
            </span>
        </li>
    </ul>

    <!-- pre标签用来定义预格式化的文本，被包围在pre标签中的文本通常会保留空格和换行符， 而文本也会呈现出等宽字体。主要是用来保存计算机中的源代码文本 -->
    <!-- <pre>
        管道的运用： 这样会展示出userInfo的值， 否则会展示 [object object]
        {{userInfo | json}}
    </pre> -->

    <button (click)="doSubmit()" class="submit">获取表单内容</button>
</div>
